<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="../../static/css/elementuifont.css"/>
		<script src="../../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
		
		<style>
			.el-row {
			    margin-bottom: 20px;
			    &:last-child {
			      margin-bottom: 0;
			    }
			  }
			  .el-col {
			    border-radius: 4px;
			  }			
			  .grid-content {
			      border-radius: 4px;
			      min-height: 36px;
			    }
			    .row-bg {
			      padding: 10px 0;
			      background-color: #f9fafc;
			    }
				.avatar-uploader .el-upload {
				    border: 1px dashed #d9d9d9;
				    border-radius: 6px;
				    cursor: pointer;
				    position: relative;
				    overflow: hidden;
				  }
				  .avatar-uploader .el-upload:hover {
				    border-color: #409EFF;
				  }
				  .avatar-uploader-icon {
				    font-size: 28px;
				    color: #8c939d;
				    width: 178px;
				    height: 178px;
				    line-height: 178px;
				    text-align: center;
				  }
				  .avatar {
				    width: 178px;
				    height: 178px;
				    display: block;
				  }
		</style>
	</head>
	<body>
		<div id="app">
			<el-row>
			  <el-col :span="3"><div class="grid-content"></div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="3"><div class="grid-content"></div></el-col>
			  <el-col :span="18">
				  <el-form :inline="true" :model="searForm" class="demo-form-inline">
				    <el-form-item>
				      <el-input clearable v-model="searForm.name" placeholder="品牌名称"></el-input>
				    </el-form-item>
				    <el-form-item>
				      <el-input clearable v-model="searForm.letter" placeholder="首字母"></el-input>
				    </el-form-item>
				    <el-form-item>
				      <el-button type="primary" @click="findList">查询</el-button>
					  <el-button type="success" @click="dialogFormVisible = true,brand = {}">新增</el-button>
				    </el-form-item>
				  </el-form>
				  
				  <el-table
				      :data="brandList"
				      border
				      style="width: 100%">
				      <el-table-column
				        prop="id"
				        label="id"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="name"
				        label="品牌名称"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        label="图像">
				  	  <template slot-scope="scope">
				  		<img :src="scope.row.image" />
				  	  </template>
				      </el-table-column>
				  	<el-table-column
				  	  prop="letter"
				  	  label="首字母">
				  	</el-table-column>
				  	<el-table-column
				  	  prop="seq"
				  	  label="排序">
				  	</el-table-column>
					<el-table-column
					  label="操作">
					  <template slot-scope="scope">
						<el-link type="primary" @click="getbyid(scope.row.id)">编辑</el-link>
						<el-link type="danger" @click="del(scope.row.id)">删除</el-link>  
					  </template>					  
					</el-table-column>
				    </el-table>
				    <el-pagination
				  	@size-change="findList"
				  	@current-change="findList"
				  	:current-page.sync="currentPage"
				  	:page-sizes="[10, 20, 30, 40]"
				  	:page-size.sync="pagesize"
				  	layout="total, sizes, prev, pager, next, jumper"
				  	:total="total">
				    </el-pagination>				  
			  </el-col>
			  <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
			</el-row>		
				
			<!-- 新增窗口  -->
			<el-dialog title="保存" :visible.sync="dialogFormVisible">
			  <el-form :model="brand">
				<el-form-item label="品牌名称" :label-width="formLabelWidth">
				  <el-input v-model="brand.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="品牌图片" :label-width="formLabelWidth">
				  <!-- <el-input v-model="brand.image" autocomplete="off"></el-input> -->
					  <el-upload 
					  class="avatar-uploader" 
					  action="/file/uploadimg.do?dir=brand"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess" 
					  :before-upload="beforeAvatarUpload">
						  <img v-if="imageurl" :src="imageurl" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					  </el-upload>
				</el-form-item>
				<el-form-item label="首字母" :label-width="formLabelWidth">
				  <el-input v-model="brand.letter" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="排序" :label-width="formLabelWidth">
				  <el-input v-model="brand.seq" autocomplete="off"></el-input>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>
	</body>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				brandList:[],
				currentPage:1,
				pagesize:10,
				total:100,
				searForm:{},
				dialogFormVisible:false,
				brand:{},
				formLabelWidth:"180px",
				imageurl:""
			},
			created(){
				this.findList()
			},
			methods:{
				findList(){
					axios.post(`/brand/findconditionpage.do?startpage=${this.currentPage}&pagesize=${this.pagesize}`,this.searForm).then((res)=>{
						this.brandList = res.data.records
						this.total = res.data.total
					})
				},
				save(){
					let id =  this.brand.id
					let action = id?'update':'save';
					this.brand.image = this.imageurl
					axios.post(`/brand/${action}.do`,this.brand).then((res)=>{
						if(res.data.code=="200"){
							this.dialogFormVisible = false
							this.$message({
							  type: 'success',
							  message: res.data.msg
							});
							this.findList()
						}else{
							this.$message.error(res.data.msg)
						}						
					})
				},
				del(id){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning'
						}).then(() => {
							axios.get(`/brand/delbyid.do?id=${id}`).then((res)=>{
								if(res.data.code=="200"){
									this.dialogFormVisible = false
									this.$message({
									  type: 'success',
									  message: '删除成功!'
									});
									this.findList()
								}else{
									this.$message.error("删除失败")
								}						
							})					          
						}).catch(() => {
						  this.$message({
							type: 'info',
							message: '已取消删除'
						  });          
						});
				},
				getbyid(id){
					axios.get(`/brand/findbyid.do?id=${id}`).then((res)=>{
						this.dialogFormVisible = true
						this.$message({
						  type: 'success',
						  message: '查询成功!'
						});					
						this.brand = res.data
					})	
				},
				handleAvatarSuccess(res, file) {
					this.imageurl = file.response
				},
			  beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
		
				if (!isJPG) {
				  this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
				  this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			  }
			}
		})
	</script>
</html>
